<template>
  <div class="cascaderX">
    <el-cascader :options="props.data" v-model="nowData"/>
  </div>
</template>

<script setup>
import {ref,watch} from 'vue'
import { ElCascader } from 'element-plus'

const props = defineProps({
  // 当前绑定
  modelValue: {
    type: [String, Number, Object],
    default: ''
  },

  // 配置
  props: {
    type: Object,
    default: {
      // 次级菜单的展开方式
      expandTrigger: 'click',
      // 是否多选
      multiple: false,
      // 是否严格的遵守父子节点不互相关联
      checkStrictly: true,
    }
  },
})

const emit = defineEmits(['update:modelValue'])

const nowData = ref([])
watch(() => props.modelValue, (newV, oldV) => {
  nowData.value = newV
}, {immediate: true, deep: true})
watch(() => nowData.value, (newV, oldV) => {
  emit('update:modelValue', newV)
}, {immediate: true, deep: true})



// 当前选中

</script>

<style scoped lang='scss'>

</style>